.kt-photo-list>div{
    padding-left:1px;
    padding-bottom:1px;
    cursor: pointer;
    transition: all .5s;
    position: relative;
    top:0;transform: scale(1,1);
}
.kt-photo-list>.clipMe{
    transform: scale(.95);
}
.kt-photo-list>.clipMe>img{
    box-shadow: 0 0 15px rgba(0,0,0,.5);
}
.kt-photo-list>.clipMe::before ,.kt-photo-list>.clipMe::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    z-index: 2;
    color:  #00c1de;
    border:2px solid #00c1de;
    box-shadow: inset 0 0 10px #00c1de;
    animation: clipMe 6s linear infinite;
}
.kt-photo-list>.clipMe::before {
    animation-delay: -3s;
}
.kt-photo-list>.active{
    position: relative;top:-300px;opacity:0;transform: scale(0.6,1.2);
    z-index: 10;
    animation:transformEnlarge .7s;
}

@keyframes transformEnlarge
{
    0%  {transform: scale(1);top:0;opacity:1}
    60%  {transform: scale(0.8,0.8);top:0;opacity:1}
    100% {transform: scale(0.6,1.2);top:-300px;opacity:0}
}

@keyframes clipMe {

    0%, 100% {
        clip: rect(0px, 181.5px, 3px, 0px);
    }
    25% {
        clip: rect(0px, 3px, 181.5px, 0px);
    }
    50% {
        clip: rect(175.5px, 181.5px, 181.5px, 0px);
    }
    75% {
        clip: rect(0px, 181.5px, 181.5px, 175.5px);
    }
}

.kt-photo-info-show{
    width:120px;
    position:relative;z-index:3;display:block;left:0;
    transition: all .5s;
}
.infoShowImg>img{
    animation:infoShowImg 2s linear infinite;
}
.kt-photo-info-content{
    width:600px;height:300px;position: fixed;top:50%;box-sizing: border-box;
    padding:25px;margin-top:-150px;left:50%;margin-left:-120px;
    animation:infoShow .5s;
}
@keyframes infoShow
{
    0%  {transform: scale(0.5);}
    80%  {transform: scale(1.2);}
    100% {transform: scale(1);}
}
@keyframes infoShowImg
{
    0%  {transform: scale(1);}
    25%  {transform: scale(0.95);}
    50%  {transform: scale(1.05);}
    100% {transform: scale(1);}
}

.circular{
    position: fixed;
    top:50%;left:50%;
    z-index: 2;
    margin: -150px 0 0 -150px;
    display: flex;justify-content: center;align-items: center;
    transition: all .5s;
}
.circular .circular1{
    box-sizing: border-box;
    position: absolute;
    opacity: 0.8;
}
.circular .circular1:nth-child(1){
    width:100%;height:100%;
    animation: circularTransform 10s linear infinite;
}
.circular .circular1:nth-child(2){
    width:80%;height:80%;
    animation: circularTransform-one 8s linear infinite;
}
/*旋转动画*/
@keyframes circularTransform
{
    0%  {transform: rotate(0deg);}
    50%  {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}
@keyframes circularTransform-one
{
    0%  {transform: rotate(0deg);}
    50%  {transform: rotate(-180deg);}
    100% {transform: rotate(-360deg);}
}